<template>

	<view class="">
		<u-navbar back-text="返回" title="最近事项" :is-back="isBack" :background="background"></u-navbar>
		<view class="u-card-wrap">

			<u-card :sub-title="item.createTime" :showFoot="false" sub-title-size="22" v-for="item in list" :key="item.id">
				<view slot="body">
					<view>
						<view @click="click(item)">
							{{item.content}}
						</view>

						<view class="switch">
							<u-switch size="35" @change="change(item)" v-model="item.status" />
						</view>
					</view>
				</view>
			</u-card>
		</view>
		<u-divider class="divider" v-if="isShow">没有更多数据了</u-divider>
	</view>

</template>



<script>
	export default {
		data() {
			return {
				isShow: false,
				background: {
					backgroundImage: 'linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)'
				},
				isBack: true,
				list: [],
				page: {
					page: 1,
					size: 10
				}
			}
		},
		methods: {
			change(item) {
				console.info(item)
				this.$u.put('/recently/update/', item)
					.then(res => {
						console.info(res)
					})
			},
			async getList() {
				const res = await this.$u.get('/recently/getPage/' + this.page.page + '/' + this.page.size)
				const temp = res.data.page.content
				this.list = [...this.list, ...temp]
				console.info("当前要显示的数据", this.list)
				console.info(this.page)
			},
			click(item) {
				this.$u.route('/pages/recentlyContent/recentlyContent', {
					id: item.id
				})
				// uni.navigateTo({
				// 	url: '../recentlyContent/recentlyContent'
				// })
			}
		},
		onLoad() {
			console.info("页面加载了")
			this.getList()
			this.time = this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
		},
		onShow() {
			console.info("页面显示了")
			// this.getList()
			// this.time = this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
		},
		onHide() {
			console.info("页面隐藏了")
			// this.list = []
		},
		onReachBottom() {
			if (this.list.length < this.page.page * 10) {
				this.isShow = true
				return
			}
			this.page.page++
			console.info("页面到底了")
			this.getList()
		},
		onPullDownRefresh() {
			console.info("开始下拉刷新")
			this.list = []
			this.page.page = 1
			setTimeout(() => {
				this.getList()
				uni.stopPullDownRefresh()
			}, 1000)
		}
	}
</script>
<style lang="scss" scoped>
	.divider {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 28
	}

	.switch {
		float: right;
	}

	.u-card-wrap {
		padding-right: 0px;
		padding-left: 0px;
		padding-top: 1px;
		padding-bottom: 1px;
		background-color: $u-bg-color;
	}

	.u-body-item {
		font-size: 22rpx;
		color: #333;
	}
</style>
